<script setup>
import { ref, onMounted, watch } from 'vue' 
import request from '../utils/request_lm.js'

// 响应式数据
const logFiles = ref([])
const selectedFile = ref('')
const logContent = ref([])
const loading = ref(false)
const error = ref('')
const linesToShow = ref(1000)

// 获取日志文件列表
const fetchLogFiles = async () => {
  try {
    loading.value = true
    error.value = ''
    const response = await request.get('/logs/files')
    if (response.code === 200) {
      logFiles.value = response.data
      if (logFiles.value.length > 0) {
        selectedFile.value = logFiles.value[0]
      }
    } else {
      error.value = response.message || '获取日志文件列表失败'
    }
  } catch (err) {
    error.value = '获取日志文件列表失败: ' + err.message
  } finally {
    loading.value = false
  }
}

// 获取日志内容
const fetchLogContent = async (filename) => {
  if (!filename) return
  
  try {
    loading.value = true
    error.value = ''
    const response = await request.get('/logs/content', {
      params: {
        filename: filename,
        lines: linesToShow.value
      }
    })
    if (response.code === 200) {
      logContent.value = response.data
    } else {
      error.value = response.message || '读取日志文件失败'
    }
  } catch (err) {
    error.value = '读取日志文件失败: ' + err.message
  } finally {
    loading.value = false
  }
}

// 刷新日志内容
const refreshLog = () => {
  if (selectedFile.value) {
    fetchLogContent(selectedFile.value)
  }
}

// 监听文件选择变化
watch(selectedFile, (newFile) => {
  if (newFile) {
    fetchLogContent(newFile)
  }
})

// 监听行数变化
watch(linesToShow, () => {
  if (selectedFile.value) {
    fetchLogContent(selectedFile.value)
  }
})

// 组件挂载时获取文件列表
onMounted(() => {
  fetchLogFiles()
})
</script>

<template>
  <div class="log-view">
    <div class="log-header">
      <h1 class="title">日志预览</h1>
      <div class="controls">
        <div class="file-selector">
          <label for="log-file">选择日志文件:</label>
          <select 
            id="log-file" 
            v-model="selectedFile" 
            :disabled="loading"
            class="file-select"
          >
            <option value="">请选择日志文件</option>
            <option 
              v-for="file in logFiles" 
              :key="file" 
              :value="file"
            >
              {{ file }}
            </option>
          </select>
        </div>
        
        <div class="lines-selector">
          <label for="lines-count">显示行数:</label>
          <select 
            id="lines-count" 
            v-model="linesToShow" 
            :disabled="loading"
            class="lines-select"
          >
            <option :value="100">最后100行</option>
            <option :value="500">最后500行</option>
            <option :value="1000">最后1000行</option>
            <option :value="2000">最后2000行</option>
            <option :value="5000">最后5000行</option>
          </select>
        </div>
        
        <button 
          @click="refreshLog" 
          :disabled="loading || !selectedFile"
          class="refresh-btn"
        >
          {{ loading ? '加载中...' : '刷新' }}
        </button>
      </div>
    </div>

    <div class="log-content">
      <div v-if="error" class="error-message">
        {{ error }}
      </div>
      
      <div v-else-if="loading" class="loading-message">
        正在加载日志内容...
      </div>
      
      <div v-else-if="logContent.length === 0" class="empty-message">
        暂无日志内容
      </div>
      
      <div v-else class="log-text">
        <div 
          v-for="(line, index) in logContent" 
          :key="index" 
          class="log-line"
        >
          <span class="line-number">{{ index + 1 }}</span>
          <span class="line-content">{{ line }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.log-view {
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.log-header {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.title {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.controls {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.file-selector, .lines-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-selector label, .lines-selector label {
  font-weight: 500;
  color: #555;
  white-space: nowrap;
}

.file-select, .lines-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  font-size: 14px;
  min-width: 150px;
}

.file-select:focus, .lines-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.refresh-btn {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.refresh-btn:hover:not(:disabled) {
  background: #0056b3;
}

.refresh-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.log-content {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.error-message, .loading-message, .empty-message {
  padding: 40px;
  text-align: center;
  color: #666;
  font-size: 16px;
}

.error-message {
  color: #dc3545;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  margin: 20px;
}

.log-text {
  flex: 1;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  background: #1e1e1e;
  color: #d4d4d4;
}

.log-line {
  display: flex;
  border-bottom: 1px solid #2d2d2d;
  transition: background-color 0.2s;
}

.log-line:hover {
  background-color: #2d2d2d;
}

.line-number {
  background: #2d2d2d;
  color: #888;
  padding: 4px 8px;
  min-width: 60px;
  text-align: right;
  border-right: 1px solid #3d3d3d;
  user-select: none;
  font-size: 12px;
}

.line-content {
  padding: 4px 12px;
  flex: 1;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 滚动条样式 */
.log-text::-webkit-scrollbar {
  width: 8px;
}

.log-text::-webkit-scrollbar-track {
  background: #2d2d2d;
}

.log-text::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

.log-text::-webkit-scrollbar-thumb:hover {
  background: #777;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .file-selector, .lines-selector {
    justify-content: space-between;
  }
  
  .file-select, .lines-select {
    min-width: auto;
    flex: 1;
  }
}
</style>